<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue样式的使用</title>
  <script src="./vue-2.4.0.js"></script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
    }

    .fs40 {
      font-size: 40px;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 1、数组-->
  <div :class="class1">颜色</div>
  <div :class="class2">放大</div>
  <div :class="classArr">数组</div>
  <!-- 2、三目运算符-->
  <div :class="flag ? 'box' : 'fs40'">三目运算符</div>
  <!-- 3、对象、属性名：类名 属性值：布尔类型的值 -->
  <div :class="{'box':true}">对象</div>
  <div :class="class3">对象</div>
  <!-- 4、数组内置对象-->
  <div :class="class4">数组内置对象</div>
  <button @click="add">add</button>
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      class1: 'box',
      class2: 'fs40',
      flag: false,
      classArr: ['box'],
      class3: {
        box: true,
        fs40: true
      },
      class4: [{
        box: true,
        fs40: false
      }]
    },
    methods: {
      add () {
        this.flag = ! this.flag;
        this.class1 += 'fs40';
        this.classArr.push('fs40');
      }
    }
  })
</script>
</html>